iT邦幫忙

2021 iThome 鐵人賽

DAY 17
0
Modern Web

JavaScript 從 50% 開始,打造函式庫不是問題!系列 第 17

JS 17 - 繼承和瀏覽器的小問題

  • 分享至 

  • xImage
  •  

大家好!

昨天我們成功使用建構式建立一個新物件。
今天我們要實作的就是,在物件原型中新增共用方法。


繼承

我們在 JS 12 提到了繼承方式,但是這些方式都是直接指向原型,也就是繼承所有的原型方法。

當然,我們也能只共用單一原型方法:

Felix.prototype = {
    concat: Array.prototype.concat,
    indexOf: Array.prototype.indexOf,
    push: Array.prototype.push,
    slice: Array.prototype.slice,
    sort: Array.prototype.sort,
    splice: Array.prototype.splice
};

還能更簡單:

const arr = [];
Felix.prototype = {
    concat: arr.concat,
    indexOf: arr.indexOf,
    push: arr.push,
    slice: arr.slice,
    sort: arr.sort,
    splice: arr.splice
};

宣告空陣列是為了避免 [].concat 等用法,因為這會直接建立一個新陣列。


小問題

試試建立一個新物件:

/* 請使用基於 Chromium 的瀏覽器 */
new Felix('body'); // [body]

怎麼會這樣?明明沒有完全繼承陣列的原型,怎麼會回傳陣列呢?
其實,只要有下列屬性,基於 Chromium 的瀏覽器就會視物件為陣列:

  1. lengthnumber
  2. splicefunction
const a = {
    length: 0,
    splice: function () {}
};

a; // [ length: 0, splice: function () {} ]
Array.isArray(a); // false

不過,本質上仍是物件就是了。


差不多也到尾聲了。
如果對文章有任何疑問,也歡迎在下方提問和建議!
我是 Felix,我們明天再見!


上一篇
JS 16 - jQuery 太重了,何不選擇需要的功能就好?
下一篇
JS 18 - 陣列也有贗品?如何辨識偽造的陣列?
系列文
JavaScript 從 50% 開始,打造函式庫不是問題!46
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言